// import React, { useState, useEffect } from 'react';
// import axios from 'axios';

// // 定义评论接口
// interface Comment {
//   id: string;
//   content: string;
//   task_id: string;
//   user_id: string;
//   created_at: string;
// }

// const TaskDetail: React.FC<{ taskId: string }> = ({ taskId }) => {
//   const [comments, setComments] = useState<Comment[]>([]);
//   const [newComment, setNewComment] = useState('');
//   const [isSubmitting, setIsSubmitting] = useState(false); // 新增状态，用于防止重复提交

//   useEffect(() => {
//     const fetchComments = async () => {
//       try {
//         const response = await axios.get(`http://localhost:3000/cyw/comments/${taskId}`);
//         setComments(response.data.comments);
//       } catch (error) {
//         console.error('Error fetching comments:', error);
//       }
//     };
//     fetchComments();
//   }, [taskId]);

//   const handleCommentSubmit = async () => {
//     if (isSubmitting) return; // 如果正在提交，直接返回
//     setIsSubmitting(true); // 设置为正在提交状态
//     try {
//       await axios.post('http://localhost:3000/cyw/comments', {
//         content: newComment,
//         task_id: taskId,
//         user_id: '当前用户ID' // 这里需要根据实际情况获取当前用户ID
//       });
//       setNewComment('');
//       const response = await axios.get(`http://localhost:3000/cyw/comments/${taskId}`);
//       setComments(response.data.comments);
//     } catch (error) {
//       console.error('Error submitting comment:', error);
//     } finally {
//       setIsSubmitting(false); // 无论成功还是失败，都将提交状态重置
//     }
//   };

//   return (
//     <div className="task-detail">
//       {/* 显示任务详情，这里可按需扩展 */}
//       <h2>任务详情</h2>
//       {/* 评论区域 */}
//       <h3>评论</h3>
//       {comments.map(comment => (
//         <div key={comment.id}>
//           <p>{comment.content}</p>
//           <p>评论人: {comment.user_id}，时间: {comment.created_at}</p>
//         </div>
//       ))}
//       <input
//         type="text"
//         placeholder="输入评论内容"
//         value={newComment}
//         onChange={(e) => setNewComment(e.target.value)}
//       />
//       <button onClick={handleCommentSubmit} disabled={isSubmitting}>
//         {isSubmitting? '提交中...' : '提交评论'}
//       </button>
//     </div>
//   );
// };

// export default TaskDetail;



// import React, { useState } from'react';
// import axios from 'axios';

// interface TaskDetailProps {
//   task: {
//     _id: string;
//     title: string;
//     description: string;
//     assignee: string;
//     dueDate: string;
//     tags: string;
//     status: string;
//     project_id: string;
//     sortOrder: number;
//   };
// }

// const TaskDetail: React.FC<TaskDetailProps> = ({ task }) => {
//   const [comment, setComment] = useState('');

//   const handleCommentSubmit = async () => {
//     try {
//       await axios.post(`http://localhost:3000/cyw/tasks/${task._id}/comments`, { comment });
//       setComment('');
//       // 可以在这里刷新评论列表
//     } catch (error) {
//       console.error('Error adding comment:', error);
//     }
//   };

//   return (
//     <div>
//       <h2>{task.title}</h2>
//       <p>描述: {task.description}</p>
//       <p>负责人: {task.assignee}</p>
//       <p>截止日期: {task.dueDate}</p>
//       <p>标签: {task.tags}</p>
//       <h3>评论</h3>
//       <input
//         type="text"
//         value={comment}
//         onChange={(e) => setComment(e.target.value)}
//         placeholder="添加评论"
//       />
//       <button onClick={handleCommentSubmit}>提交评论</button>
//     </div>
//   );
// };

// export default TaskDetail;











// import React, { useState } from'react';
// import axios from 'axios';
// import dayjs from 'dayjs';

// interface TaskDetailProps {
//   task: {
//     _id: string;
//     title: string;
//     description: string;
//     assignee: string;
//     dueDate: string;
//     tags: string;
//     status: string;
//     project_id: string;
//     sortOrder: number;
//   };
// }

// const TaskDetail: React.FC<TaskDetailProps> = ({ task }) => {
//   const [comment, setComment] = useState('');

//   const handleCommentSubmit = async () => {
//     try {
//       await axios.post(`http://localhost:3000/cyw/tasks/${task._id}/comments`, { comment });
//       setComment('');
//       // 可以在这里刷新评论列表
//     } catch (error) {
//       console.error('Error adding comment:', error);
//     }
//   };


//   return (
//     <div className="task-detail-container">
//       <h2>{task.title}</h2>
//       <p>描述: {task.description}</p>
//       <p>负责人: {task.assignee}</p>
//       <p>截止日期: {dayjs(task.dueDate).format('YYYY-MM-DD HH:mm:ss')}</p>
//       <p>标签: {task.tags}</p>
//       <p>状态: {task.status}</p>
//       <h3>评论</h3>
//       <input
//         type="text"
//         value={comment}
//         onChange={(e) => setComment(e.target.value)}
//         placeholder="添加评论"
//       />
//       <button onClick={handleCommentSubmit}>提交评论</button>
//     </div>
//   );
// };

// export default TaskDetail;










// import React, { useState, useEffect } from 'react';
// import axios from 'axios';
// import dayjs from 'dayjs';

// interface TaskDetailProps {
//   task: {
//     _id: string;
//     title: string;
//     description: string;
//     assignee: string;
//     dueDate: string;
//     tags: string;
//     status: string;
//     project_id: string;
//     sortOrder: number;
//   };
// }

// interface Comment {
//   id: string;
//   content: string;
//   task_id: string;
//   user_id: string;
//   created_at: string;
// }

// const TaskDetail: React.FC<TaskDetailProps> = ({ task }) => {
//   const [comment, setComment] = useState('');
//   const [comments, setComments] = useState<Comment[]>([]);

//   useEffect(() => {
//     const fetchComments = async () => {
//       try {
//         const response = await axios.get(`http://localhost:3000/cyw/comments/${task._id}`);
//         setComments(response.data);
//       } catch (error) {
//         console.error('Error fetching comments:', error);
//       }
//     };
//     fetchComments();
//   }, [task._id]);

//   const handleCommentSubmit = async () => {
//     try {
//       await axios.post(`http://localhost:3000/cyw/tasks/${task._id}/comments`, { comment });
//       setComment('');
//       // 重新获取评论列表，以更新显示
//       const response = await axios.get(`http://localhost:3000/cyw/tasks/${task._id}/comments`);
//       setComments(response.data);
//     } catch (error) {
//       console.error('Error adding comment:', error);
//     }
//   };

//   return (
//     <div className="task-detail-container">
//       <h2>{task.title}</h2>
//       <p>描述: {task.description}</p>
//       <p>负责人: {task.assignee}</p>
//       <p>截止日期: {dayjs(task.dueDate).format('YYYY-MM-DD HH:mm:ss')}</p>
//       <p>标签: {task.tags}</p>
//       <p>状态: {task.status}</p>
//       <h3>评论</h3>
//       {comments.map((c, index) => (
//         <div key={index}>
//           <p>{c.content}</p>
//           <p>评论人: {c.user_id}，时间: {c.created_at}</p>
//         </div>
//       ))}
//       <input
//         type="text"
//         value={comment}
//         onChange={(e) => setComment(e.target.value)}
//         placeholder="添加评论"
//       />
//       <button onClick={handleCommentSubmit}>提交评论</button>
//     </div>
//   );
// };

// export default TaskDetail;


import React, { useState, useEffect } from 'react';
import axios from 'axios';
import dayjs from 'dayjs';

interface TaskDetailProps {
  task: {
    _id: string;
    title: string;
    description: string;
    assignee: string;
    dueDate: string;
    tags: string;
    status: string;
    project_id: string;
    sortOrder: number;
  };
}

interface Comment {
  id: string;
  content: string;
  task_id: string;
  user_id: string;
  created_at: string;
}

const TaskDetail: React.FC<TaskDetailProps> = ({ task }) => {
  const [comment, setComment] = useState('');
  const [comments, setComments] = useState<Comment[]>([]);

  useEffect(() => {
    const fetchComments = async () => {
      try {
        const response = await axios.get(`http://localhost:3000/cyw/comments/${task._id}`);
        console.log('Fetch Comments Response:', response.data);
        setComments(response.data.comments);
      } catch (error) {
        console.error('Error fetching comments:', error);
      }
    };
    fetchComments();
  }, [task._id]);

  const handleCommentSubmit = async () => {
    try {
      await axios.post(`http://localhost:3000/cyw/comments`, {
        content: comment,
        task_id: task._id,
        user_id: '当前用户ID', // 替换为实际的用户 ID
      });
      setComment('');
      // 重新获取评论列表，以更新显示
      const response = await axios.get(`http://localhost:3000/cyw/comments/${task._id}`);
      setComments(response.data.comments);
    } catch (error) {
      console.error('Error adding comment:', error);
    }
  };

  return (
    <div className="task-detail-container">
      <h2>{task.title}</h2>
      {/* <p className='task-description'>描述: {task.description}</p> */}
      <textarea className='task-description' value={task.description} />
      <p>负责人: {task.assignee}</p>
      <p>截止日期: {dayjs(task.dueDate).format('YYYY-MM-DD HH:mm:ss')}</p>
      <p>标签: {task.tags}</p>
      <p>状态: {task.status}</p>
      <h3>评论</h3>
      {comments.map((c, index) => (
        <div key={index} className='commentdiv'>
          <p>{c.content}</p>
          <p>评论人: {c.user_id}，时间: {dayjs(c.created_at).format('YYYY-MM-DD HH:mm:ss')}</p>
        </div>
      ))}
      <input
        type="text"
        value={comment}
        onChange={(e) => setComment(e.target.value)}
        placeholder="添加评论"
      />
      &nbsp;&nbsp;
      <button onClick={handleCommentSubmit}>提交评论</button>
    </div>
  );
};

export default TaskDetail;